<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import icon_house from '@/assets/imgs/bt_sy.png'
import {
  getCorporateStructure,
  getAcceptanceNum,
  getRectificationNum,
  getAppraisePublicity
} from '../api.js'

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const getChartPieOption = ({ list }) => {
  const colors = ['#01FFA9', '#3E5AFB', '#FE9307', '#10AFFF']
  const data = list.map((e, i) => {
    return {
      ...e,
      itemStyle: {
        color: colors[i],
      },
      label: {
        formatter: '{b|{b}}\n{hr|}\n{c|{c}}{unit|个} ',
        rich: {
          b: {
            color: '#ffffff',
            fontSize: 14,
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          c: {
            color: '#ffffff',
            fontSize: 14,
            lineHeight: 28,
            color: colors[i]
          },
          unit: {
            color: '#ffffff',
            fontSize: 14,
            lineHeight: 28,
            color: colors[i]
          },
        }
      },
    }
  })
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b} : <br/> {c} ({d}%)'
    },
    series: [
      {
        type: 'pie',
        radius: '65%',
        center: ['50%', '50%'],
        selectedMode: 'single',
        data: data, 
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
  }
}


const enterprisePartsChartPieRef = ref(null)
const updateChartPieEnterpriseParts = (res) => {
  const data = Object.entries(res).map(([name, value]) => ({ name, value })) 
  enterprisePartsChartPieRef.value?.updateOption(getChartPieOption({ list: data, image: icon_house }))
}

const getChartGaugeOption = ({ title, percent }) => {
  return {
    series: [
      {
        type: 'gauge',
        center: ['75%', '50%'],
        progress: {
          show: true,
          width: 10,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                  offset: 0, color: '#14BDFF' // 0% 处的颜色
              }, {
                  offset: 1, color: '#00F4EA' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        axisLine: {
          lineStyle: {
            width: 10
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          length: 15,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        pointer: {
            show: false,
        },
        axisLabel: {
          show: false,
          distance: 25,
          color: '#999',
          fontSize: 20
        },
        anchor: {
          show: false,
        },
        title: {
          show: true,
          fontSize: 18,
          color: '#fff',
          offsetCenter: [0, '90%']
        },
        detail: {
          valueAnimation: true,
          fontSize: 18,
          offsetCenter: [0, 0],
          color: 'inherit',
          formatter: '{value}%'
        },
        data: [
          {
            name: title,
            value: percent
          }
        ]
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    // animationDuration: 0,
    // animationDurationUpdate: 3000,
    // animationEasing: 'linear',
    // animationEasingUpdate: 'linear'
  }
}


// 通过率
const acceptanceRateCharGaugeRef = ref(null)
const completionAcceptanceRateCharGaugeRef = ref(null)
const acceptanceData = ref({
  total: 13205,
  accept: 8876,
  reject: 2139
})
const completionAcceptanceData = ref({
  total: 13205,
  accept: 8876,
  reject: 2139
})

const getAcceptanceRate = (data) => {
  return (data.accept / data.total * 100).toFixed(2)
}

const updateDtaRectificationNum = (res) => {
  completionAcceptanceData.value = {
    total: res['竣工验收数量'],
    accept: res['竣工验收通过'],
    reject: res['竣工验收不通过']
  }
  // getAcceptanceRate(completionAcceptanceData.value)
  const cdata = { title: '竣工验收通过率', percent: res['竣工验收通过率'] }
  completionAcceptanceRateCharGaugeRef.value?.updateOption(getChartGaugeOption(cdata))
}

const updateDtaAcceptanceNum = (res) => {
  acceptanceData.value = {
    total: res['验收数量'],
    accept: res['验收通过'],
    reject: res['验收不通过']
  }
  // getAcceptanceRate(acceptanceData.value)
  const data = { title: '验收通过率', percent: res['验收通过率']  }
  acceptanceRateCharGaugeRef.value?.updateOption(getChartGaugeOption(data))
}


const tableData = ref([])
const updateTableData = (data) => {
  tableData.value = data?.list ?? []
}

const reqData = () => {
  Promise.all([
    getCorporateStructure({ parkId: '' }),
    getAcceptanceNum(),
    getRectificationNum(),
    getAppraisePublicity(),
  ]).then(([corporateStructure, acceptanceNum, rectificationNum, appraisePublicity]) => {
    if (corporateStructure.success) {
      updateChartPieEnterpriseParts(corporateStructure.data)
    }
    if (acceptanceNum.success) {
      updateDtaAcceptanceNum(acceptanceNum.data)
    }
    if (rectificationNum.success) {
      updateDtaRectificationNum(rectificationNum.data)
    }
    if (appraisePublicity.success) {
      updateTableData(appraisePublicity.data)
    }
  })
}

onMounted(() => {
  reqData()
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card name="注册建筑企业结构" class="property-item-card">
      <div class="chart">
        <draw-echarts
          ref="enterprisePartsChartPieRef"
          width="420"
          height="180"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
    <card name="验收数量" class="check-acceptance-card">
      <div class="chart">
        <draw-echarts
          ref="acceptanceRateCharGaugeRef"
          width="420"
          height="160"
          :options="{}"
        ></draw-echarts>
        <div class="detail-panel">
          <div class="total">验收数量：<span class="value">{{ acceptanceData.total }}个</span></div>
          <div class="total">验收通过：<span class="value">{{ acceptanceData.accept }}个</span></div>
          <div class="total">验收不通过：<span class="value">{{ acceptanceData.reject }}个</span></div>
        </div>
      </div>
      <div class="divider"></div>
      <div class="chart">
        <draw-echarts
          ref="completionAcceptanceRateCharGaugeRef"
          width="420"
          height="160"
          :options="{}"
        ></draw-echarts>
        <div class="detail-panel">
          <div class="total">验收数量：<span class="value">{{ acceptanceData.total }}个</span></div>
          <div class="total">验收通过：<span class="value">{{ acceptanceData.accept }}个</span></div>
          <div class="total">验收不通过：<span class="value">{{ acceptanceData.reject }}个</span></div>
        </div>
      </div>
    </card>
    <card name="施工企业诚信行为评价公式" class="card">
      <div class="table-wrap">
        <el-scrollbar style="height: 250px;">
          <div class="tr th">
            <div class="name td">企业名称</div>
            <div class="num td">评价</div>
          </div>
          <div class="tr" v-for="(item, index) in tableData" :key="index">
            <div class="name td">
              <el-tooltip :content="item.name"  placement="top" effect="light">
                {{ item.name }}
              </el-tooltip>
            </div>
            <div class="area td">
              <el-tooltip :content="String(item.type)"  placement="top" effect="light">
                {{ item.type }}
              </el-tooltip>
            </div>
          </div>
          <div class="no-data" v-if="!tableData.length">暂无数据</div>
        </el-scrollbar>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.right {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .property-item-card {
    height: 100%;

    
  }
  .check-acceptance-card {
    .divider {
      margin-left: auto;
      margin-right: auto;
      width: 380px;
      height: 2px;
      background: linear-gradient(to right, #00F4EA00, #01B4C1, #00F4EA00);
    }
    .chart {
      position: relative;

      .detail-panel {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 50%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;

        .value {
          // font-size: 24px;
          font-weight: bold;
          background: linear-gradient(to right, #14BDFF, #00F4EA);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
  .table-wrap {
    color: #ffffff;
    
    .tr {
      display: flex;
      height: 32px;
      line-height: 32px;
      .td {
        flex: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        padding: 0 4px;
      }
      .name {
        flex: 7;
      }
    }
    .th {
      color: #bbdbf6;
    }
    .tr:nth-child(odd) {
      background-color: #1c2d4c;
    }
    .tr:nth-child(even) {
      background-color: #08142d;
    }

    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 3;
      color: #B9D9F4;
    }
  }
}
</style>
